<template>
  <div id="app">
    <div class="tit">
      <span class="iconfont icon-fanhui" @click="back"></span>
      <p class="h1">重置密码</p>
    </div>
    <div class="pass">
      <mt-field label="密码" :state="passStatus" placeholder="输入密码"  :type="showPass ? 'text' : 'password'" v-model="password" @blur.native.capture="changePass"><span class="iconfont icon-yanjing" @click="showPass=!showPass"></span></mt-field>
      <p>6-20位字符，由字母，数字组合</p>
    </div>
    <div class="btn">
      <button class="add" @click="finish">完成</button>
    </div>
  </div>
</template>
<script>
    export default {
        name:'App',
        components:{

        },
        data(){
            return{
                password:'',
                passStatus:'',
                phone:'',
                showPass:false
            }
        },
        mounted(){
            let str=location. href;
            this.url2json(str);
        },
        methods:{
            url2json(str){
                var reg = /[^?]*\??([^&]+)=([^&]+)/g, result, obj = {};
                while(result = reg.exec(str)) {
                    obj[result[1]] = result[2];
                }
                this.phone=obj.name;
            },
            back(){
              this.$router.go(-1)
            },
            changePass(){
                let reg=/^[.a-zA-Z0-9_-]{5,7}$/;
                if (!reg.test(this.password)||this.password=='') {
                    this.passStatus="error";
                }else {
                    this.passStatus="success";
                }
            },
            finish(){
                if (this.passStatus=="success"){
                    this.axios({
                        method:'get',
                        url:'/api/UsersOperation/updatePW',
                        params:{
                            "userTel":this.phone,
                            "passWord":this.password
                        }
                    }).then((res)=>{
                        console.log(res);
                    }).catch(()=>{
                        console.log('网络错误')
                    });
                }
            }
        }

    }
</script>
<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  html{
    font-size: @baseFontSize;
  }
  .px2rem(@name,@px){
      @{name}:@px / 2 / @baseSize * 1rem;
  }

  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
#app {
  .tit{
    position: relative;
    background: orange;
    span{
      position: absolute;
      left: 15px;
      top: 10px;
    }
    .h1{
      text-align: center;
      .px2rem(line-height,80);
      .px2rem(height,80);
      border-bottom: 1px solid gray;
      color: white;
    }
  }
  .pass{
    .mint-cell-wrapper{
     border-bottom: 1px solid gray;
    }
    span{
      .px2rem(margin-left,20)
    }
    p{
      .px2rem(padding-left,20);
      .px2rem(font-size,20);
      color: red;
    }
    .icon-mima{
      .px2rem(font-size,40);
      .px2rem(padding-left,20)
    }
  }
  .btn{
    .px2rem(padding,20);
    .add{
      .px2rem(width,710);
      .px2rem(height,80);
      background: orangered;
      color: white;
      text-align: center;
      .px2rem(font-size,30);
      .px2rem(line-height,80);
      border: none;
      outline: none;
    }
  }
}


</style>
